<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style type="text/css">
        .login {
            height: 190px;
            width: 340px;
            padding: 20px;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 4px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -150px 0 0 -150px;
            z-index: 99;
        }
        a {
            width: 300px;
        }
        .carousel {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 90;
            background-color: rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
<div class="layui-carousel carousel" lay-filter="carousel" id="carousel">
    <!--轮播图-->
    <div carousel-item="">
        <div><img src="/images/background1.png"></div>
        <div><img src="/images/background2.png"></div>
    </div>
    <!--登录表单-->
    <div class="layui-container login">
        <form id="loginForm" action="/user/login" class="layui-form" method="post" layui-form-pane>
            <input name="type" type="hidden" value="1">
            <input type="text" name="username" lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
            <br>
            <input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            <br>
            <a class="layui-btn layui-btn-normal " lay-filter="submit" lay-submit="" id="submit">登录</a>
        </form>
    </div>
</div>
</body>
<script src="/layui/layui.js"></script>
<script src="/js/core.util.js"></script>
<script>
    layui.use(['form','jquery','carousel'],function () {
        var layer = layui.layer;
        var form = layui.form;
        var carousel = layui.carousel;
        // 登录提交事件
        form.on('submit', function (data) {
            CoreUtil.sendAjax("/api/user/login", JSON.stringify(data.field), function (res) {
                CoreUtil.setData("access_token", res.data.accessToken);
                CoreUtil.setData("refresh_token", res.data.refreshToken);
                layer.msg(res.message);
                window.location.href = "/index/home";
            }, "POST");
            return false;
        });
        // 设置轮播图
        carousel.render({
            elem: '#carousel',
            interval: 4000,  // 间隔4s
            anim: 'fade',
            full: true,  // 全屏
            width: '100%',
            arrow: "none"
        });
    })
</script>
</html>